<template>
  <Category :scene="scene"></Category>
  <el-card style="margin: 20px 0px">
    <div v-show="scene === 0">
      <el-button type="primary" icon="Plus" @click="addSpu">添加SPU</el-button>
      <el-table border style="margin: 20px 0px" :data="spuDataList">
        <el-table-column
          label="序号"
          type="index"
          width="100px"
          align="center"
        ></el-table-column>
        <el-table-column label="SPU名称" prop="spuName"></el-table-column>
        <el-table-column
          label="SPU描述"
          prop="description"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="SPU操作">
          <template #default="{ row }">
            <el-button
              type="primary"
              icon="Plus"
              size="small"
              @click="addSku(row)"
            ></el-button>
            <el-button
              type="warning"
              icon="Edit"
              size="small"
              @click="updateSpu(row)"
            ></el-button>
            <el-button
              type="info"
              icon="view"
              size="small"
              @click="getHasSku(row)"
            ></el-button>
            <el-popconfirm
              :title="`你确定要删除${row.spuName}?`"
              width="200px"
              @confirm="confirm(row)"
            >
              <template #reference>
                <el-button type="danger" icon="Delete" size="small"></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="limit"
        :page-sizes="[3, 5, 7, 9]"
        size="large"
        :background="true"
        layout="total,prev, pager, next, jumper, -> , sizes, total"
        :total="total"
        @current-change="getHasSpu"
        @size-change="changeSize"
      />
      <el-dialog v-model="showInfo" title="SKU列表">
        <el-table border :data="skuInfo">
          <el-table-column label="SKU名称" prop="skuName"></el-table-column>
          <el-table-column label="SKU价格(￥)" prop="price"></el-table-column>
          <el-table-column label="SKU重量(g)" prop="weight"></el-table-column>
          <el-table-column label="SKU图片">
            <template #="{ row }">
              <el-image :src="row.skuDefaultImg" alt="图片无法显示"></el-image>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
    <div v-show="scene === 1">
      <SpuForm @changeScene="changeScene" ref="spuFormVc"></SpuForm>
    </div>
    <div v-show="scene === 2">
      <SkuForm @changeScene="changeScene" ref="skuFormVc"></SkuForm>
    </div>
  </el-card>
</template>

<script setup lang="ts">
  import SpuForm from './spuForm.vue'
  import SkuForm from './skuForm.vue'
  import { onBeforeUnmount, ref, watch } from 'vue'
  import { useCategoryStore } from '@/store/modules/category'
  import { reqHasSpu, reqSkuInfo, reqRemoveSpu } from '@/api/product/spu'
  import type { SpuData, SpuDataList, SkuData } from '@/api/product/spu/type'
  import { ElMessage } from 'element-plus'
  let scene = ref<number>(0)
  let pageNo = ref<number>(1)
  let limit = ref<number>(3)
  let total = ref<number>(100)
  let spuDataList = ref<SpuDataList>([])

  let categoryStore = useCategoryStore()
  let spuFormVc = ref()
  let skuFormVc = ref()
  let showInfo = ref<boolean>(false)
  let skuInfo = ref<SkuData[]>([])
  watch(
    () => categoryStore.c3Id,
    () => {
      getHasSpu()
    },
  )

  const getHasSpu = async (pager = 1) => {
    pageNo.value = pager
    if (!categoryStore.c3Id) return
    let result = await reqHasSpu(pageNo.value, limit.value, categoryStore.c3Id)
    if (result.code === 200) {
      spuDataList.value = result.data.records
      total.value = result.data.total
    }
  }

  const changeSize = () => {
    getHasSpu()
  }

  const addSpu = () => {
    spuFormVc.value.initSpuData(categoryStore.c3Id)
    scene.value = 1
  }

  const updateSpu = (row: SpuData) => {
    scene.value = 1
    spuFormVc.value.initHasSpuData(row)
  }

  const changeScene = (params: { flag: number; toWhichPage: string }) => {
    if (params.toWhichPage === 'toCurrent') {
      getHasSpu(pageNo.value)
    } else {
      getHasSpu()
    }
    scene.value = params.flag
  }

  const addSku = (row: SpuData) => {
    skuFormVc.value.initSkuData(
      categoryStore.c1Id,
      categoryStore.c2Id,
      categoryStore.c3Id,
      row,
    )
    scene.value = 2
  }

  const getHasSku = async (row: SpuData) => {
    let result = await reqSkuInfo(Number(row.id))
    if (result.code === 200) {
      skuInfo.value = result.data
      showInfo.value = true
    } else {
      ElMessage({
        type: 'error',
        message: '获取SKU详情失败',
      })
    }
  }

  const confirm = async (row: SpuData) => {
    let result = await reqRemoveSpu(Number(row.id))

    if (result.code === 200) {
      ElMessage({
        type: 'success',
        message: '删除SPU成功',
      })
      //重新获取spu数据，处理返回哪一页
      getHasSpu(spuDataList.value.length > 1 ? pageNo.value : pageNo.value - 1)
    } else {
      ElMessage({
        type: 'error',
        message: '删除SPU失败',
      })
    }
  }

  onBeforeUnmount(() => {
    //路由切换时清除数据
    categoryStore.$reset()
  })
</script>

<style scoped></style>
